<template>
	<view class="content">
		<uni-nav-bar fixed class="unibarS">
			<view class="input-view">
				<u-search placeholder="搜索关键字" v-model="keyword" @search="searchHandle" shape="square" actionText="取消" @custom="customHandle" :actionStyle="{ color: 'rgba(77, 172, 177, 1)' }"></u-search>
			</view>
		</uni-nav-bar>
        <view class="search-type">
            <view class="title">客户</view>
            <view class="num">{{ customerTotal }}个结果</view>
        </view>
        <view class="search-history-list">
            <block v-for="(item, index) in customerList" :key="index">
                <view class="search-item" v-if="index < 5">
                    <view class="left">
                        <view class="search-text">{{ item.customerName }}</view>
                        <view class="search-time">{{ item.createTime }}</view>
                    </view>
                    <u-icon name="arrow-right" color="rgba(123, 128, 135, 1)" size="20"></u-icon>
                </view>
            </block>

            <view class="search-more" v-if="customerTotal > 5" @click="moreCustomer()">查看全部结果</view>
        </view>
        <!-- 订单 -->
        <view class="search-type">
            <view class="title">订单</view>
            <view class="num">{{ orderTotal }}个结果</view>
        </view>
        <view class="search-history-list">
            <view class="search-item" v-for="(item, index) in orderList" :key="index">
                <view class="left">
                    <view class="search-text">{{ item.orderNumber }}</view>
                    <view class="search-time">{{ item.createTime }}</view>
                </view>
                <u-icon name="arrow-right" color="rgba(123, 128, 135, 1)" size="20"></u-icon>
            </view>
            <view class="search-more" v-if="orderTotal > 5" @click="moreorder()">查看全部结果</view>
        </view>
	</view>
</template>
<script>
export default {
	data() {
		return {
            keyword: '',
            customerParams: {
                keyWords: '',
				pageNum: 1,
				pageSize: 20,
            },
            customerList: [],
            customerTotal: 0,

            orderParams: {
				keyword: '',
				pageNum: 1,
				pageSize: 20,
            },
            orderList: [],
            orderTotal: 0,
		}
	},
	onLoad: function (options) {
        this.getCusData()
        this.getOrderData()
    },
	methods: {
        getCusData() {
			this.$http.get('/app/customer/list', this.customerParams).then(res => {
				if (res.code == 200) {
					this.customerList = res.rows
					this.customerTotal = res.total
				} else {
					uni.$u.toast(res.msg)
				}
			})
		},
        getOrderData() {
			this.$http.get('/app/order/list', this.orderParams).then(res => {
				if (res.code == 200) {
					this.orderList = res.rows
					this.orderTotal = res.total
				} else {
					uni.$u.toast(res.msg)
				}
			})
		},
        searchHandle() {
            this.customerParams.keyWords = this.keyword
            this.orderParams.keyword = this.keyword

			this.customerParams.pageNum = 1
			this.orderParams.pageNum = 1

			this.status = 'loading'
            this.getCusData()
            this.getOrderData()
        },
        confirm() {

        },
        customHandle() {
            this.keyword = ''
			this.searchHandle()
        },
        moreCustomer() {
            uni.navigateTo({
                url: '/pages/other/customeTypeSearch?keyword=' + this.keyword
            });
        },
        moreorder() {
            uni.navigateTo({
                url: '/pages/other/orderTypeSearch?keyword=' + this.keyword
            });
        },
	}
}
</script>

<style lang="scss" scoped>
.content {
    // padding: 0 32rpx;
}

.unibarS {
	/deep/.uni-navbar__header {
		padding: 0 32rpx;
	}

	/deep/.uni-navbar__content {
		border-bottom: none !important;
		box-shadow: 0px 0px 4px rgba(136, 136, 136, 0.12);
	}

	/deep/.uni-navbar__header-btns-left {
		display: none;
	}
	/deep/.uni-navbar__header-btns-right {
		display: none;
	}
}

.input-view {
	width: 100%;
    display: flex;
    align-items: center;
	/deep/.u-tabs__wrapper__nav__item {
		flex: 1;
	}
	/deep/.u-tabs__wrapper__nav__line {
		background: rgba(77, 172, 177, 1) !important;
	}
}

.search-type {
    display: flex;
    margin: 20rpx 32rpx;
    .title {
        font-size: 32rpx;
        font-weight: 500;
        color: rgba(12, 16, 25, 1);
    }
    .num {
        font-size: 32rpx;
        font-weight: 400;
        color: rgba(103, 117, 133, 1)
    }

}

.search-history-list {
    background: rgba(255, 255, 255, 1);
    padding: 0 32rpx;
    margin-bottom: 40rpx;
    .search-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16rpx 0;
        border-radius: 20rpx;
        // background: rgba(255, 255, 255, 1);
        border-bottom: 1px solid rgba(240, 240, 240, 1);
        .search-text {
            flex: 1;
            font-size: 32rpx;
            font-weight: 500;
            color: rgba(12, 16, 25, 1);
            // 超出隐藏
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .search-time {
            font-size: 26rpx;
            font-weight: 400;
            color: rgba(103, 117, 133, 1);
        }
    }
    .search-more {
        text-align: center;
        padding: 28rpx 0;
        font-size: 28rpx;
        font-weight: 400;
        color: rgba(77, 172, 177, 1);
    }
}

</style>
